<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>0515-js作业-螺旋</title>
    <style>
        html,input,button{font-family: "Microsoft YaHei";}
        ul,input{margin: 0;}
        ul{padding: 0;list-style:none;}
        body{
            margin: 0;
            cursor: default;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .wrap{
            margin: 20px;
            width: 500px;
        }
        .wrap ul,.wrap li{
            width: 100%;
        }
        .wrap li{
            padding-top: 10px;
            height: 45px;
            border-bottom: 1px solid #f60;
            font-size: 0;
            box-sizing: border-box;
        }
        .wrap li span{
            font-size: 14px;
            line-height: 25px;
            vertical-align: middle;
            cursor: default;
        }
        .wrap li input,.wrap li button{
            height: 25px;
            font-size: 14px;
            vertical-align: middle;
            box-sizing: border-box;
        }
        .wrap li input{
            display: none;
            padding: 0 5px;
            width: 150px;
        }
        .wrap li button{
            margin: 0 5px;
            width: 50px;
            background-color: #000;
            border: 0;
            color: #fff;
            vertical-align: middle;
            cursor: pointer;
        }
        .wrap li .btn_c{
            background-color: #fff;
            color: #000;
        }
        .wrap li .show{
            display: inline-block;
        }
        .wrap li .hidd{
            display: none;
        }
    </style>
</head>
<body>
    <section class="wrap">
        <ul>
            <li>
                <span>点击按钮修改文字</span>
                <input type="text">
                <button>修改</button>
            </li>
            <li>
                <span>点击按钮修改文字</span>
                <input type="text">
                <button>修改</button>
            </li>
            <li>
                <span>点击按钮修改文字</span>
                <input type="text">
                <button>修改</button>
            </li>
            <li>
                <span>点击按钮修改文字</span>
                <input type="text">
                <button>修改</button>
            </li>
        </ul>
    </section>
</body>
<script>
    var oSpan = document.getElementsByTagName('span'),
        oInp = document.getElementsByTagName('input'),
        oBtn = document.getElementsByTagName('button');

    for(var i=0;i<4;i++){
        oSpan[i].num = i;
        oInp[i].num = i;
        oBtn[i].num = i;
        oBtn[i].bool = true;
        oBtn[i].onclick = function(){
            if(this.bool){
                oInp[this.num].value = oSpan[this.num].innerHTML;
                oSpan[this.num].className = 'hidd';
                oInp[this.num].className = 'show';
                oBtn[this.num].className = 'btn_c';
                oBtn[this.num].innerHTML = '提交';
                this.bool = false;
            }else{
                oSpan[this.num].innerHTML = oInp[this.num].value;
                oSpan[this.num].className = 'show';
                oInp[this.num].className = 'hidd';
                oBtn[this.num].className = '';
                oBtn[this.num].innerHTML = '修改';
                this.bool = true;
            }
        }
    }
</script>
</html>